@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-descriptions' !default;

.#{$prefix} {
  box-sizing: border-box;
  width: 100%;

  // 避免嵌套表格样式污染
  & > table {
    box-sizing: border-box;
    width: 100%;
    table-layout: fixed;
  }

  &-row {
    box-sizing: border-box;

    > th,
    > td {
      box-sizing: border-box;
      padding: 0;
      font-weight: use-text-weight('normal');
    }

    &:last-child {
      box-sizing: border-box;
      border-bottom: none;
    }
  }

  &-item {
    box-sizing: border-box;
    vertical-align: top;

    &__container {
      box-sizing: border-box;
      display: flex;
      align-items: var(--hi-v4-container-align-items, normal);
      padding-right: var(--hi-v4-container-padding-right, 0);
    }

    &__label,
    &__content {
      box-sizing: border-box;
      align-items: baseline;
      vertical-align: baseline;
      font-size: use-text-size('normal');
    }

    &__label {
      color: use-color('gray', 500);
      margin-inline-end: use-spacing(6);
      flex-shrink: 0;
    }

    &__content {
      color: use-color('gray', 700);
      overflow-x: auto;
    }
  }

  &--placement {
    &-horizontal {
      &.#{$prefix}--size-md {
        .#{$prefix}-row > th,
        .#{$prefix}-row > td {
          padding-bottom: use-spacing(6);
        }
      }

      &.#{$prefix}--size-sm {
        .#{$prefix}-row > th,
        .#{$prefix}-row > td {
          padding-bottom: use-spacing(2);
        }
      }
    }

    &-vertical {
      .#{$prefix}-item__label {
        padding-bottom: use-spacing(1);
      }

      .#{$prefix}-item__content {
        padding-bottom: use-spacing(8);
      }
    }
  }

  &--appearance {
    &-table {
      border: use-border-size('normal') use-color('gray', 200);
      background-color: use-color-static('white');

      &.#{$prefix}--size-md {
        .#{$prefix}-row > th,
        .#{$prefix}-row > td {
          padding: use-spacing(7);
        }
      }

      &.#{$prefix}--size-sm {
        .#{$prefix}-row > th,
        .#{$prefix}-row > td {
          padding: use-spacing(5);
        }
      }

      > table {
        table-layout: auto;
        border-collapse: collapse;
        border-color: use-color('gray', 200);
      }

      .#{$prefix}-item__label,
      .#{$prefix}-item__content {
        padding: use-spacing(7);
        border-right: use-border-size('normal') use-color('gray', 200);

        &:last-child {
          border-right: none;
        }
      }

      .#{$prefix}-item__label {
        color: use-color('gray', 700);
        background-color: use-color('gray', 100);
        font-weight: use-text-weight('medium');
        text-align: left;
      }

      .#{$prefix}-row {
        border-bottom: use-border-size('normal') use-color('gray', 200);

        &:last-child {
          border-bottom: none;
        }
      }
    }

    &-unset {
      &.#{$prefix}--label-placement-right {
        .#{$prefix}-item__label {
          padding-right: use-spacing(5);
        }
      }
    }
  }
}
